<script lang="ts" setup>
import type { TableColumnsType } from 'ant-design-vue';

import { computed, h, onMounted, reactive, ref } from 'vue';

import { DatePicker, message, Select, Tag } from 'ant-design-vue';

// 费用类型枚举
const FeeType = {
  RENT: 'rent',
  WATER: 'water',
  ELECTRICITY: 'electricity',
  PROPERTY: 'property',
  INTERNET: 'internet',
} as const;

// 缴费方式枚举
const PaymentMethod = {
  CASH: 'cash',
  WECHAT: 'wechat',
  ALIPAY: 'alipay',
  BANK_TRANSFER: 'bank_transfer',
} as const;

// 费用状态枚举
const FeeStatus = {
  UNPAID: 'unpaid',
  PARTIAL: 'partial',
  PAID: 'paid',
  OVERDUE: 'overdue',
} as const;

// 费用类型配置
const feeTypeConfig = {
  [FeeType.RENT]: { label: '租金', color: 'blue' },
  [FeeType.WATER]: { label: '水费', color: 'cyan' },
  [FeeType.ELECTRICITY]: { label: '电费', color: 'orange' },
  [FeeType.PROPERTY]: { label: '物业费', color: 'green' },
  [FeeType.INTERNET]: { label: '网费', color: 'purple' },
};

// 缴费方式配置
const paymentMethodConfig = {
  [PaymentMethod.CASH]: { label: '现金', color: 'green' },
  [PaymentMethod.WECHAT]: { label: '微信', color: 'green' },
  [PaymentMethod.ALIPAY]: { label: '支付宝', color: 'blue' },
  [PaymentMethod.BANK_TRANSFER]: { label: '银行转账', color: 'orange' },
};

// 费用状态配置
const feeStatusConfig = {
  [FeeStatus.UNPAID]: { label: '未缴费', color: 'red' },
  [FeeStatus.PARTIAL]: { label: '部分缴费', color: 'orange' },
  [FeeStatus.PAID]: { label: '已缴费', color: 'green' },
  [FeeStatus.OVERDUE]: { label: '逾期', color: 'red' },
};

// 响应式数据
const activeTab = ref('management');
const loading = ref(false);
const feeModalVisible = ref(false);
const paymentModalVisible = ref(false);
const historyModalVisible = ref(false);
const selectedFee = ref<any>(null);

// 费用统计数据
const statistics = reactive({
  totalReceivable: 0,
  totalReceived: 0,
  totalUnpaid: 0,
  collectionRate: 0,
});

// 搜索表单
const searchForm = reactive({
  roomNumber: '',
  feeType: '',
  status: '',
  month: null,
});

// 费用表单
const feeForm = reactive({
  roomNumber: '',
  feeType: '',
  amount: 0,
  dueDate: null,
  description: '',
});

// 缴费表单
const paymentForm = reactive({
  amount: 0,
  method: '',
  remark: '',
});

// 模拟数据
const feeList = ref([
  {
    id: 1,
    roomNumber: '101',
    feeType: FeeType.RENT,
    amount: 2000,
    paidAmount: 2000,
    dueDate: '2024-01-31',
    status: FeeStatus.PAID,
    description: '1月租金',
    createTime: '2024-01-01',
  },
  {
    id: 2,
    roomNumber: '102',
    feeType: FeeType.WATER,
    amount: 150,
    paidAmount: 0,
    dueDate: '2024-01-31',
    status: FeeStatus.UNPAID,
    description: '1月水费',
    createTime: '2024-01-01',
  },
  {
    id: 3,
    roomNumber: '103',
    feeType: FeeType.ELECTRICITY,
    amount: 300,
    paidAmount: 150,
    dueDate: '2024-01-31',
    status: FeeStatus.PARTIAL,
    description: '1月电费',
    createTime: '2024-01-01',
  },
]);

const paymentHistory = ref([
  {
    id: 1,
    feeId: 1,
    roomNumber: '101',
    feeType: FeeType.RENT,
    amount: 2000,
    method: PaymentMethod.WECHAT,
    paymentTime: '2024-01-15 10:30:00',
    operator: '张三',
    remark: '微信支付',
  },
]);

// 计算属性
const filteredFeeList = computed(() => {
  return feeList.value.filter((fee) => {
    if (
      searchForm.roomNumber &&
      !fee.roomNumber.includes(searchForm.roomNumber)
    )
      return false;
    if (searchForm.feeType && fee.feeType !== searchForm.feeType) return false;
    if (searchForm.status && fee.status !== searchForm.status) return false;
    return true;
  });
});

// 表格列定义
const feeColumns: TableColumnsType = [
  {
    title: '房间号',
    dataIndex: 'roomNumber',
    key: 'roomNumber',
    width: 100,
  },
  {
    title: '费用类型',
    dataIndex: 'feeType',
    key: 'feeType',
    width: 120,
    customRender: ({ text }) => {
      const config = feeTypeConfig[text];
      return h('span', { style: { color: config.color } }, config.label);
    },
  },
  {
    title: '应收金额',
    dataIndex: 'amount',
    key: 'amount',
    width: 120,
    customRender: ({ text }) => `¥${text.toFixed(2)}`,
  },
  {
    title: '已收金额',
    dataIndex: 'paidAmount',
    key: 'paidAmount',
    width: 120,
    customRender: ({ text }) => `¥${text.toFixed(2)}`,
  },
  {
    title: '欠费金额',
    key: 'unpaidAmount',
    width: 120,
    customRender: ({ record }) => {
      const unpaid = record.amount - record.paidAmount;
      return h(
        'span',
        { style: { color: unpaid > 0 ? '#ff4d4f' : '#52c41a' } },
        `¥${unpaid.toFixed(2)}`,
      );
    },
  },
  {
    title: '到期日期',
    dataIndex: 'dueDate',
    key: 'dueDate',
    width: 120,
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: 100,
    customRender: ({ text }) => {
      const config = feeStatusConfig[text];
      return h(Tag, { color: config.color }, () => config.label);
    },
  },
  {
    title: '操作',
    key: 'action',
    width: 200,
    customRender: ({ record }) => {
      return h('div', { style: { display: 'flex', gap: '8px' } }, [
        h(
          'a',
          {
            style: { color: '#1890ff', cursor: 'pointer' },
            onClick: () => handlePayment(record),
          },
          '缴费',
        ),
        h(
          'a',
          {
            style: { color: '#1890ff', cursor: 'pointer' },
            onClick: () => handleViewHistory(record),
          },
          '历史',
        ),
        h(
          'a',
          {
            style: { color: '#1890ff', cursor: 'pointer' },
            onClick: () => handleEdit(record),
          },
          '编辑',
        ),
      ]);
    },
  },
];

const historyColumns: TableColumnsType = [
  {
    title: '房间号',
    dataIndex: 'roomNumber',
    key: 'roomNumber',
    width: 100,
  },
  {
    title: '费用类型',
    dataIndex: 'feeType',
    key: 'feeType',
    width: 120,
    customRender: ({ text }) => {
      const config = feeTypeConfig[text];
      return h('span', { style: { color: config.color } }, config.label);
    },
  },
  {
    title: '缴费金额',
    dataIndex: 'amount',
    key: 'amount',
    width: 120,
    customRender: ({ text }) => `¥${text.toFixed(2)}`,
  },
  {
    title: '缴费方式',
    dataIndex: 'method',
    key: 'method',
    width: 120,
    customRender: ({ text }) => {
      const config = paymentMethodConfig[text];
      return h('span', { style: { color: config.color } }, config.label);
    },
  },
  {
    title: '缴费时间',
    dataIndex: 'paymentTime',
    key: 'paymentTime',
    width: 180,
  },
  {
    title: '操作员',
    dataIndex: 'operator',
    key: 'operator',
    width: 100,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    key: 'remark',
  },
];

// 方法
const loadStatistics = () => {
  const totalReceivable = feeList.value.reduce(
    (sum, fee) => sum + fee.amount,
    0,
  );
  const totalReceived = feeList.value.reduce(
    (sum, fee) => sum + fee.paidAmount,
    0,
  );
  const totalUnpaid = totalReceivable - totalReceived;
  const collectionRate =
    totalReceivable > 0 ? (totalReceived / totalReceivable) * 100 : 0;
  collectionRatetotalReceivable0totalReceivedtotalReceivable100;

  Object.assign(statistics, {
    totalReceivable,
    totalReceived,
    totalUnpaid,
    collectionRate,
  });
};

const handleSearch = () => {
  // 实现搜索逻辑
  console.log('搜索条件:', searchForm);
};

const handleReset = () => {
  Object.assign(searchForm, {
    roomNumber: '',
    feeType: '',
    status: '',
    month: null,
  });
};

const handleAddFee = () => {
  Object.assign(feeForm, {
    roomNumber: '',
    feeType: '',
    amount: 0,
    dueDate: null,
    description: '',
  });
  feeModalVisible.value = true;
};

const handleEdit = (record: any) => {
  console.log('编辑费用记录:', record);

  // 确保记录数据完整
  if (!record) {
    console.error('记录数据为空');
    return;
  }

  selectedFee.value = record;

  // 处理日期格式：转换为 Date 对象用于 a-date-picker
  let dueDate = null;
  if (record.dueDate) {
    try {
      if (typeof record.dueDate === 'string') {
        // 确保日期字符串格式正确
        const dateStr = record.dueDate.includes('T')
          ? record.dueDate
          : `${record.dueDate}T00:00:00`;
        dueDate = new Date(dateStr);

        // 验证日期是否有效
        if (isNaN(dueDate.getTime())) {
          console.warn('无效的日期格式:', record.dueDate);
          dueDate = null;
        }
      } else if (record.dueDate instanceof Date) {
        dueDate = record.dueDate;
      }
    } catch (error) {
      console.warn('日期格式转换失败:', record.dueDate, error);
      dueDate = null;
    }
  }

  Object.assign(feeForm, {
    roomNumber: record.roomNumber || '',
    feeType: record.feeType || '',
    amount: record.amount || 0,
    dueDate,
    description: record.description || '',
  });
  console.log('费用表单数据:', feeForm);

  // 延迟打开模态框，确保数据已经设置完成
  setTimeout(() => {
    feeModalVisible.value = true;
  }, 0);
};

const handlePayment = (record: any) => {
  selectedFee.value = record;
  Object.assign(paymentForm, {
    amount: record.amount - record.paidAmount,
    method: '',
    remark: '',
  });
  paymentModalVisible.value = true;
};

const handleViewHistory = (record: any) => {
  selectedFee.value = record;
  historyModalVisible.value = true;
};

const handleSaveFee = () => {
  if (!feeForm.roomNumber || !feeForm.feeType || !feeForm.amount) {
    message.error('请填写完整信息');
    return;
  }

  if (selectedFee.value) {
    // 编辑模式
    const index = feeList.value.findIndex(
      (item) => item.id === selectedFee.value.id,
    );
    if (index !== -1) {
      // 处理日期格式：如果是 Date 对象，转换为字符串
      let dueDate = feeForm.dueDate;
      if (feeForm.dueDate instanceof Date) {
        try {
          dueDate = feeForm.dueDate.toISOString().split('T')[0];
        } catch (error) {
          console.warn('日期格式转换失败:', feeForm.dueDate, error);
          dueDate = null;
        }
      }

      Object.assign(feeList.value[index], {
        roomNumber: feeForm.roomNumber,
        feeType: feeForm.feeType,
        amount: feeForm.amount,
        dueDate,
        description: feeForm.description,
      });
    }
  } else {
    // 新增模式
    // 处理日期格式：如果是 Date 对象，转换为字符串
    let dueDate = feeForm.dueDate;
    if (feeForm.dueDate instanceof Date) {
      dueDate = feeForm.dueDate.toISOString().split('T')[0];
    }

    const newFee = {
      id: Date.now(),
      roomNumber: feeForm.roomNumber,
      feeType: feeForm.feeType,
      amount: feeForm.amount,
      paidAmount: 0,
      dueDate,
      status: FeeStatus.UNPAID,
      description: feeForm.description,
      createTime: new Date().toISOString().split('T')[0],
    };
    feeList.value.push(newFee);
  }

  feeModalVisible.value = false;
  selectedFee.value = null;
  loadStatistics();
  message.success('保存成功');
};

const handleSavePayment = () => {
  if (!paymentForm.amount || !paymentForm.method) {
    message.error('请填写完整信息');
    return;
  }

  if (
    paymentForm.amount >
    selectedFee.value.amount - selectedFee.value.paidAmount
  ) {
    message.error('缴费金额不能超过欠费金额');
    return;
  }

  // 更新费用记录
  const feeIndex = feeList.value.findIndex(
    (item) => item.id === selectedFee.value.id,
  );
  if (feeIndex !== -1) {
    feeList.value[feeIndex].paidAmount += paymentForm.amount;
    const newPaidAmount = feeList.value[feeIndex].paidAmount;
    const totalAmount = feeList.value[feeIndex].amount;

    // 更新状态
    if (newPaidAmount >= totalAmount) {
      feeList.value[feeIndex].status = FeeStatus.PAID;
    } else if (newPaidAmount > 0) {
      feeList.value[feeIndex].status = FeeStatus.PARTIAL;
    }
  }

  // 添加缴费记录
  const newPayment = {
    id: Date.now(),
    feeId: selectedFee.value.id,
    roomNumber: selectedFee.value.roomNumber,
    feeType: selectedFee.value.feeType,
    amount: paymentForm.amount,
    method: paymentForm.method,
    paymentTime: new Date().toLocaleString(),
    operator: '当前用户',
    remark: paymentForm.remark,
  };
  paymentHistory.value.push(newPayment);

  paymentModalVisible.value = false;
  selectedFee.value = null;
  loadStatistics();
  message.success('缴费成功');
};

// 生命周期
onMounted(() => {
  loadStatistics();
});
</script>

<template>
  <div class="fee-management">
    <!-- 费用统计卡片 -->
    <a-card title="费用统计" :bordered="false" style="margin-bottom: 16px">
      <a-row :gutter="16" class="statistics-row">
        <a-col :span="6">
          <a-statistic
            title="本月应收"
            :value="statistics.totalReceivable"
            :precision="2"
            prefix="¥"
            :value-style="{ color: '#1890ff' }"
          />
        </a-col>
        <a-col :span="6">
          <a-statistic
            title="本月已收"
            :value="statistics.totalReceived"
            :precision="2"
            prefix="¥"
            :value-style="{ color: '#52c41a' }"
          />
        </a-col>
        <a-col :span="6">
          <a-statistic
            title="本月欠费"
            :value="statistics.totalUnpaid"
            :precision="2"
            prefix="¥"
            :value-style="{ color: '#ff4d4f' }"
          />
        </a-col>
        <a-col :span="6">
          <a-statistic
            title="收缴率"
            :value="statistics.collectionRate"
            :precision="2"
            suffix="%"
            :value-style="{ color: '#722ed1' }"
          />
        </a-col>
      </a-row>
    </a-card>

    <!-- 主要内容卡片 -->
    <a-card title="费用管理" :bordered="false">
      <a-tabs v-model:active-key="activeTab">
        <!-- 费用管理 -->
        <a-tab-pane key="management" tab="费用管理">
          <div class="table-header">
            <a-form layout="inline" :model="searchForm" class="search-form">
              <a-form-item label="房间号">
                <a-input
                  v-model:value="searchForm.roomNumber"
                  placeholder="请输入房间号"
                  allow-clear
                />
              </a-form-item>
              <a-form-item label="费用类型">
                <a-select
                  v-model:value="searchForm.feeType"
                  placeholder="请选择费用类型"
                  allow-clear
                  style="width: 120px"
                >
                  <a-select-option
                    v-for="(config, key) in feeTypeConfig"
                    :key="key"
                    :value="key"
                  >
                    {{ config.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="状态">
                <a-select
                  v-model:value="searchForm.status"
                  placeholder="请选择状态"
                  allow-clear
                  style="width: 120px"
                >
                  <a-select-option
                    v-for="(config, key) in feeStatusConfig"
                    :key="key"
                    :value="key"
                  >
                    {{ config.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="月份">
                <a-date-picker
                  v-model:value="searchForm.month"
                  picker="month"
                  placeholder="请选择月份"
                  style="width: 120px"
                />
              </a-form-item>
              <a-form-item>
                <a-space>
                  <a-button type="primary" @click="handleSearch">
                    搜索
                  </a-button>
                  <a-button @click="handleReset"> 重置 </a-button>
                </a-space>
              </a-form-item>
            </a-form>
            <a-button type="primary" @click="handleAddFee"> 新增费用 </a-button>
          </div>

          <a-table
            :columns="feeColumns"
            :data-source="filteredFeeList"
            :loading="loading"
            :pagination="{ pageSize: 10 }"
            row-key="id"
          />
        </a-tab-pane>

        <!-- 缴费历史 -->
        <a-tab-pane key="history" tab="缴费历史">
          <a-table
            :columns="historyColumns"
            :data-source="paymentHistory"
            :loading="loading"
            :pagination="{ pageSize: 10 }"
            row-key="id"
          />
        </a-tab-pane>
      </a-tabs>
    </a-card>

    <!-- 费用编辑/新增模态框 -->
    <a-modal
      v-model:open="feeModalVisible"
      :title="selectedFee ? '编辑费用' : '新增费用'"
      @ok="handleSaveFee"
      width="600px"
    >
      <a-form :model="feeForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="房间号" required>
              <a-input
                v-model:value="feeForm.roomNumber"
                placeholder="请输入房间号"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="费用类型" required>
              <Select
                v-model:value="feeForm.feeType"
                placeholder="请选择费用类型"
              >
                <a-select-option
                  v-for="(config, key) in feeTypeConfig"
                  :key="key"
                  :value="key"
                >
                  {{ config.label }}
                </a-select-option>
              </Select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="金额" required>
              <a-input-number
                v-model:value="feeForm.amount"
                :min="0"
                :precision="2"
                style="width: 100%"
                placeholder="请输入金额"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="到期日期">
              <DatePicker
                v-model:value="feeForm.dueDate"
                style="width: 100%"
                value-format="x"
                placeholder="请选择到期日期"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="描述">
          <a-textarea
            v-model:value="feeForm.description"
            placeholder="请输入描述"
            :rows="3"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 缴费模态框 -->
    <a-modal
      v-model:open="paymentModalVisible"
      title="缴费处理"
      @ok="handleSavePayment"
      width="500px"
    >
      <div v-if="selectedFee" class="payment-info">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="房间号">
            {{ selectedFee.roomNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="费用类型">
            <a-tag :color="feeTypeConfig[selectedFee.feeType].color">
              {{ feeTypeConfig[selectedFee.feeType].label }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="应收金额">
            ¥{{ selectedFee.amount.toFixed(2) }}
          </a-descriptions-item>
          <a-descriptions-item label="已收金额">
            ¥{{ selectedFee.paidAmount.toFixed(2) }}
          </a-descriptions-item>
          <a-descriptions-item label="欠费金额">
            <span style="color: #ff4d4f"
              >¥{{
                (selectedFee.amount - selectedFee.paidAmount).toFixed(2)
              }}</span
            >
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <a-form :model="paymentForm" layout="vertical" style="margin-top: 16px">
        <a-form-item label="缴费金额" required>
          <a-input-number
            v-model:value="paymentForm.amount"
            :min="0"
            :max="selectedFee ? selectedFee.amount - selectedFee.paidAmount : 0"
            :precision="2"
            style="width: 100%"
            placeholder="请输入缴费金额"
          />
        </a-form-item>
        <a-form-item label="缴费方式" required>
          <a-select
            v-model:value="paymentForm.method"
            placeholder="请选择缴费方式"
          >
            <a-select-option
              v-for="(config, key) in paymentMethodConfig"
              :key="key"
              :value="key"
            >
              {{ config.label }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea
            v-model:value="paymentForm.remark"
            placeholder="请输入备注"
            :rows="2"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 缴费历史模态框 -->
    <a-modal
      v-model:open="historyModalVisible"
      title="缴费历史"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedFee" class="history-info">
        <a-descriptions :column="2" bordered style="margin-bottom: 16px">
          <a-descriptions-item label="房间号">
            {{ selectedFee.roomNumber }}
          </a-descriptions-item>
          <a-descriptions-item label="费用类型">
            <a-tag :color="feeTypeConfig[selectedFee.feeType].color">
              {{ feeTypeConfig[selectedFee.feeType].label }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="应收金额">
            ¥{{ selectedFee.amount.toFixed(2) }}
          </a-descriptions-item>
          <a-descriptions-item label="已收金额">
            ¥{{ selectedFee.paidAmount.toFixed(2) }}
          </a-descriptions-item>
        </a-descriptions>
      </div>

      <a-table
        :columns="historyColumns"
        :data-source="
          paymentHistory.filter((item) => item.feeId === selectedFee?.id)
        "
        :pagination="false"
        row-key="id"
      />
    </a-modal>
  </div>
</template>

<style scoped>
.fee-management {
  padding: 16px;
}

.statistics-row {
  margin-bottom: 24px;
}

.table-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.search-form {
  flex: 1;
}

.payment-info,
.history-info {
  margin-bottom: 16px;
}

:deep(.ant-statistic-title) {
  font-size: 14px;
  color: #666;
}

:deep(.ant-statistic-content) {
  font-size: 24px;
  font-weight: bold;
}

/* 自定义模态框样式 */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 50%);
}

.modal-content {
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.close-btn {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
}

.close-btn:hover {
  color: #666;
}

.modal-body {
  padding: 24px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: border-color 0.3s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
}

.modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
}

.btn {
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.3s;
}

.btn-primary {
  color: white;
  background-color: #1890ff;
  border-color: #1890ff;
}

.btn-primary:hover {
  background-color: #40a9ff;
  border-color: #40a9ff;
}

.btn-secondary {
  color: #666;
  background-color: white;
}

.btn-secondary:hover {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
}
</style>
